<template>
  <div>
    <Row>
      <Table row-key="id" :columns="dataColumns" :data="dataTable" border></Table>
    </Row>
    <Modal v-model="modal.visible" :title="modal.title" v-on:on-ok="submitForm" :mask-closable="false"
           width="600" v-on:on-cancel="cancelForm">
      <Form ref="modalForm" :model="modal.form" :label-width="100" label-position="right" :rules="modal.rules">
        <FormItem label="title" prop="title">
          <Input v-model="modal.form.title" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
        <FormItem label="path" prop="path">
          <Input v-model="modal.form.path" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
        <FormItem label="icon" prop="icon">
          <Input v-model="modal.form.icon" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
        <FormItem label="level" prop="level">
          <Input v-model="modal.form.level" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
        <FormItem label="ord" prop="ord">
          <Input v-model="modal.form.ord" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
        <FormItem label="fixed" prop="fixed">
          <Input v-model="modal.form.fixed" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
        <FormItem label="permission" prop="permission">
          <Input v-model="modal.form.permission" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
        <FormItem label="type" prop="type">
          <Input v-model="modal.form.type" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
        <FormItem label="baseMenu" prop="baseMenu">
          <Input v-model="modal.form.baseMenu" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
        <FormItem label="color" prop="color">
          <Input v-model="modal.form.color" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelForm">取消</Button>
        <Button type="primary" @click="submitForm" :loading="false">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import API from '@/libs/api'

export default {
  data () {
    return {
      apiUrl: 'SysMenu',
      replaceWord: '',
      searchParam: {
        current: 1,
        size: 20,
        total: 0
      },
      operate: [],
      modal: {
        title: '',
        visible: false,
        rules: {},
        form: {
          id: ''
        }
      },
      dataColumns: [
        // { type: 'selection', width: 60, align: 'center' },
        // { title: '序号', type: 'index', align: 'center', width: 100 },
        // { title: 'id', align: 'center', key: 'id', },
        { title: 'title', align: 'center', key: 'title', tree: true },
        { title: 'path', align: 'center', key: 'path' },
        { title: 'icon', align: 'center', key: 'icon' },
        { title: 'level', align: 'center', key: 'level' },
        // { title: 'parentId', align: 'center', key: 'parentId', },
        { title: 'ord', align: 'center', key: 'ord' },
        { title: 'fixed', align: 'center', key: 'fixed' },
        { title: 'permission', align: 'center', key: 'permission' },
        { title: 'type', align: 'center', key: 'type' },
        { title: 'baseMenu', align: 'center', key: 'baseMenu' },
        { title: 'color', align: 'center', key: 'color' },
        {
          title: '操作',
          type: 'operation',
          align: 'center',
          width: 130,
          render: (h, param) => {
            let btn = []
            let edit = h('Icon', {
              props: { type: 'md-create', size: '24' },
              style: { color: 'blur', cursor: 'pointer', marginRight: '10px' },
              on: { click: () => this.editModal(param.row) }
            })
            let delBtn = h('Icon', {
              props: { type: 'ios-trash-outline', size: '24' },
              style: { color: 'red', cursor: 'pointer', marginLeft: '5px' },
              on: { click: () => this.delModal(param.row) }
            })
            btn.push(edit)
            btn.push(delBtn)
            return h('div', btn)
          }
        }
      ],
      dataTable: []
    }
  },
  methods: {
    queryFn () {
      API.fetch(this.apiUrl + '/getTree', this.searchParam).then(
        res => {
          this.dataTable = res.data
        },
        error => {
          this.$Message.info(error.msg)
        }
      )
    },
    restFn () {
      this.searchParam.current = 1
      this.searchParam.size = 20
      this.queryFn()
    },
    addModal () {
      this.modal.form.id = ''
      Object.assign(this.modal, {
        title: '添加',
        visible: true,
        form: this.modal.form
      })
    },
    editModal (row) {
      Object.assign(this.modal, {
        title: '编辑',
        visible: true
      })
      Object.assign(this.modal.form, row)
    },
    submitForm () {
      this.$refs.modalForm.validate(valid => {
        if (valid) {
          if (this.modal.form.id) {
            API.put(this.apiUrl, this.modal.form).then(
              res => {
                this.modal.visible = false
                this.queryFn()
                this.$refs.modalForm.resetFields()
                this.modal.form.id = ''
              },
              error => this.$Message.info(error.msg)
            )
          } else {
            API.post(this.apiUrl, this.modal.form).then(
              res => {
                this.modal.visible = false
                this.queryFn()
                this.$refs.modalForm.resetFields()
                this.modal.form.id = ''
              },
              error => this.$Message.info(error.msg)
            )
          }
        } else {
          return false
        }
      })
    },
    cancelForm () {
      this.modal.visible = false
      if (this.modal.form.id) {
        this.$refs.modalForm.resetFields()
      }
    },
    delModal (row) {
      console.info(row)
      API.del(this.apiUrl, row.id).then(res => {
        this.queryFn()
      },
      error => this.$Message.info(error.msg))
    },
    batchDelete () {

    },
    pageChangeFn (current) {
      this.searchParam.current = current
      this.queryFn()
    },
    searchFn (value) {
      this.queryFn()
    }
  },
  mounted () {
    this.queryFn()
  }
}
</script>
